<template>
    <div id="dashboard">
        <line-marker 
          className=''
          id='linemarkerId'
          width='100%'
          height='500px'
        ></line-marker>
        <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="8">
            <div class="chart-wrapper">
                <raddar-chart></raddar-chart>
            </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
            <div class="chart-wrapper">
                <pie-chart></pie-chart>
            </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
            <div class="chart-wrapper">
                <bar-chart></bar-chart>
            </div>
        </el-col>
        </el-row>
    </div>
   
</template>
<script>
    import LineMarker from '@/components/Charts/lineMarker'
    import RaddarChart from './components/RaddarChart'
    import PieChart from './components/PieChart'
    import BarChart from './components/BarChart'
    export default {
        name: 'dashboard',
        data () {
            return {
            }
        },
        mounted () {
        },
        methods: {
        },
        computed:{
        },
        watch: {
        },
        components:{
            LineMarker,
            RaddarChart,
            PieChart,
            BarChart
        }
    }
</script>
<style lang="stylus" scoped>
    #dashboard 
        border 1px solid transparent   
        #linemarkerId
            background-color #ffffff
        .el-row
            margin-top 10px
            .chart-wrapper
                background #fff
                padding 16px 16px 0
                margin-bottom 32px
</style>

